<template>
  <div
    :class="{
      'page-content':true,
      'page-content-border':border,
      'padding-8':padding,
      'page-content-border-inner':innerBorder
    }"
    :style="style"
  >
    <div v-if="$scopedSlots['toolbar']" class="page-content-toolbar">
      <slot name="toolbar"></slot>
    </div>
    <div
      :class="{
      'page-content-body':true,
      'flex-column':column,
      'flex-wrap':wrap,
      'flex':flex
    }"
    >
      <slot></slot>
    </div>
    <div v-if="$scopedSlots['footbar']" class="page-content-footbar">
      <slot name="footbar"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageContent",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    column: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: false,
    },
    padding: {
      type: Boolean,
      default: true,
    },
    wrap: {
      type: Boolean,
      default: false,
    },
    flex: {
      type: Boolean,
      default: true,
    },
    innerBorder: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    style() {
      return {
        width: this.width,
      };
    },
  },

  methods: {
    __handle_window_resize() {
      this.$nextTick(() => {
        this.$emit("resize");
      });
    },
  },

  mounted() {
    this.__handle_window_resize();
    window.addEventListener("resize", this.__handle_window_resize);
  },

  destroyed() {
    window.removeEventListener("resize", this.__handle_window_resize);
  },
};
</script>

<style lang="less" scoped>
@import "../../../../assets/styles/theme.less";
.page-content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  background: #fff;

  &-border {
    & > .page-content {
      &-body {
        background: @content;
        border-style: @border-style-base;
        border-width: @border-width-base;
        border-color: @border-color-split;
      }

      &-toolbar,
      &-footbar {
        background: @content;
        border-style: @border-style-base;
        border-color: @border-color-split;
        border-left-width: @border-width-base;
        border-right-width: @border-width-base;
      }

      &-toolbar {
        border-top-width: @border-width-base;
        border-bottom-width: 0;
      }

      &-footbar {
        border-top-width: 0;
        border-bottom-width: @border-width-base;
      }
    }
  }

  &-border-inner {
    & > .page-content {
      &-toolbar,
      &-footbar {
        background: @content;
        border-style: @border-style-base;
        border-color: @border-color-split;
      }

      &-toolbar {
        border-width: 0 0 @border-width-base 0;
      }

      &-footbar {
        border-width: @border-width-base 0 0 0;
      }
    }
  }

  &-body {
    display: flex;
    overflow-y: auto;

    &.flex-column {
      flex-direction: column;
    }

    &.flex-wrap {
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
    }

    &.flex {
      flex: 1;
    }
  }

  &-toolbar,
  &-footbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: @span;
    position: relative;
    & > a {
      text-decoration: none;
      color: inherit !important;
    }

    &-last {
      background-color: #fff;
      border: 1px solid #dddee1;
      border-top: none;
      padding: 8px;
    }
  }
}
</style>
<style lang="less">
.page-content {
  &-toolbar,
  &-footbar {
    & > .ivu-input-wrapper,
    & > .ivu-btn,
    & > .ivu-dropdown,
    & > .ivu-select,
    & > .ivu-poptip,
    & > .ivu-date-picker {
      margin: 8px 0 8px 8px;
      vertical-align: middle;
    }
  }
}
</style>
